<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cursor自动注册助手</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <div class="title">
        <span class="brand">iShot</span>
        <span class="subtitle">Cursor自动注册助手</span>
      </div>
    </header>

    <!-- Tab导航 -->
    <div class="tabs">
      <button class="tab-btn active" data-tab="main">主程序</button>
      <button class="tab-btn" data-tab="card">卡信息</button>
      <button class="tab-btn" data-tab="user">用户信息</button>
      <button class="tab-btn" data-tab="email">邮箱生成</button>
      <button class="tab-btn" data-tab="password">密码</button>
      <button class="tab-btn" data-tab="verify">邮箱验证码</button>
    </div>

    <!-- 主程序Tab -->
    <div class="tab-content active" id="main-tab">
      <!-- 统计数据 -->
      <div class="stats-row">
        <div class="stat-item">
          <div class="stat-label">剩余卡数量：</div>
          <div class="stat-value" id="cardCount">0</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">用户信息数量：</div>
          <div class="stat-value" id="userCount">0</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">已生成邮箱：</div>
          <div class="stat-value" id="emailCountMain">0</div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-cards">
        <button class="action-card card-register" id="btnRegisterOnly">
          <div class="card-icon">🚀</div>
          <div class="card-title">立即注册（仅注册）</div>
          <div class="card-desc">自动完成注册流程</div>
        </button>

        <button class="action-card card-bind" id="btnBindOnly">
          <div class="card-icon">⚡</div>
          <div class="card-title">全流程绑卡</div>
          <div class="card-desc">Dashboard → 自动绑卡</div>
        </button>

        <button class="action-card card-all" id="btnRegisterAndBind">
          <div class="card-icon">🎯</div>
          <div class="card-title">立即注册+全流程绑卡</div>
          <div class="card-desc">注册完成 → 自动绑卡</div>
        </button>
      </div>

      <!-- 重要提示 -->
      <div class="important-notice">
        <div class="notice-icon">⚠️</div>
        <div class="notice-content">
          <div class="notice-title">重要提示</div>
          <div>此插件仅支持繁体中文，请将浏览器语言设置为繁体中文后使用</div>
          <div>⚠️ 人机校验需要自己手动完成</div>
        </div>
      </div>

      <!-- 套餐选择 -->
      <div class="section-group">
        <div class="section-icon">💎</div>
        <div class="section-title-inline">套餐选择</div>
      </div>
      <select id="planSelect" class="plan-select">
        <option value="pro-basic">Pro - 基础版</option>
        <option value="pro-plus">Pro - Plus版</option>
        <option value="team">Team - 团队版</option>
      </select>
      <p class="hint">选择后自动保存，用于全流程绑卡</p>

      <!-- 配置状态 -->
      <div class="section-group">
        <div class="section-icon">📊</div>
        <div class="section-title-inline">配置状态</div>
      </div>
      <div class="config-status">
        <div class="status-item">
          <span class="status-icon">💳</span>
          <span class="status-label">卡信息：</span>
          <span class="status-count" id="cardStatusCount">0 张</span>
        </div>
        <div class="status-item">
          <span class="status-icon">👤</span>
          <span class="status-label">用户信息：</span>
          <span class="status-count" id="userStatusCount">0 个</span>
        </div>
        <div class="status-item">
          <span class="status-icon">📧</span>
          <span class="status-label">邮箱：</span>
          <span class="status-count" id="emailStatusCount">0 个</span>
        </div>
        <div class="status-item">
          <span class="status-icon">🔐</span>
          <span class="status-label">密码：</span>
          <span class="status-badge status-success">已配置 ✅</span>
        </div>
        <div class="status-item">
          <span class="status-icon">🔧</span>
          <span class="status-label">Worker验证：</span>
          <span class="status-badge">未启用</span>
        </div>
        <div class="status-item">
          <span class="status-icon">🗑️</span>
          <span class="status-label">卡删除策略：</span>
          <span class="status-badge status-warning">捆绑后删除⚡</span>
        </div>
      </div>

      <!-- 作者信息 -->
      <div class="author-box">
        <div class="author-title">✨ 作者信息</div>
        <div class="author-item">
          <span class="author-icon">👨‍💻</span>
          <span class="author-label">作者：</span>
          <span>执</span>
        </div>
        <div class="author-item">
          <span class="author-icon">🌐</span>
          <span class="author-label">博客：</span>
          <a href="https://aigcview.top/" target="_blank">https://aigcview.top/</a>
        </div>
      </div>

      <!-- 操作手册 -->
      <div class="manual-box">
        <button class="btn btn-manual" id="showManual">
          📖 点击查看详细操作手册
        </button>
      </div>
      
      <!-- 已注册账号 -->
      <div class="section-group">
        <div class="section-icon">✅</div>
        <div class="section-title-inline">已注册账号</div>
      </div>
      <div id="registeredAccountsList" class="item-list"></div>
    </div>

    <!-- 卡信息Tab -->
    <div class="tab-content" id="card-tab">
      <div class="warning-box">
        <span class="warning-icon">⚠</span>
        <span>绑卡失败会自动删除卡信息并切换卡，但绑卡成功以后不会删除卡信息。请问是否要绑卡成功以后也删除卡信息？</span>
        <label class="checkbox-label">
          <input type="checkbox" id="deleteAfterSuccess">
          <span>是，绑卡成功后也删除卡信息</span>
        </label>
        <p class="hint">此配置会自动保存，勾选/取消勾选时立即生效</p>
      </div>

      <div class="section-title">卡信息配置</div>
      <p class="hint">每行一张卡，格式：卡号|月份|年份|CVC</p>
      <p class="example">示例：379240306952123|12|2027|0006</p>
      
      <textarea id="cardInput" rows="6" placeholder="请输入卡信息，每行一张卡"></textarea>
      <button class="btn btn-primary btn-block" id="saveCards">💾 保存卡信息</button>

      <div id="cardList" class="item-list"></div>
    </div>

    <!-- 用户信息Tab -->
    <div class="tab-content" id="user-tab">
      <div class="section-title">用户信息配置</div>
      <p class="hint">多个用户逐行输入（以"全名："作为用户标识），格式如下：</p>
      <div class="example-box">
        <p>全名：劉思敏</p>
        <p>郵遞區號：110</p>
        <p>縣：台北市</p>
        <p>地區：信義區</p>
        <p>地址第 1 行：市府路7號</p>
        <p>地址第 2 行：（選填）</p>
      </div>

      <textarea id="userInput" rows="10" placeholder="请输入用户信息"></textarea>
      <button class="btn btn-primary btn-block" id="saveUsers">💾 保存用户信息</button>

      <div id="userList" class="item-list"></div>
    </div>

    <!-- 邮箱生成Tab -->
    <div class="tab-content" id="email-tab">
      <div class="section-title">📧 邮箱生成配置</div>
      
      <div class="form-row">
        <div class="form-group">
          <label>邮箱前缀：</label>
          <input type="text" id="emailPrefix" placeholder="iron3" value="iron3">
        </div>
        <div class="form-group">
          <label>邮箱后缀：</label>
          <input type="text" id="emailSuffix" placeholder="@suyzg.xyz" value="@suyzg.xyz">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label>生成数量：</label>
          <input type="number" id="emailCount" value="10" min="1" max="100">
        </div>
        <div class="form-group">
          <label>生成方式：</label>
          <select id="emailMode">
            <option value="sequence">后缀数字顺序生成</option>
            <option value="random">随机字符串</option>
          </select>
        </div>
      </div>

      <button class="btn btn-primary" id="generateEmails">🎲 生成邮箱</button>

      <div class="section-divider"></div>

      <div class="section-subtitle">
        📋 已保存的邮箱后缀
        <button class="btn btn-small btn-primary" id="addSuffixBtn">+ 新增后缀</button>
      </div>
      <p class="hint">暂无保存的后缀，点击"+ 新增后缀"按钮添加</p>

      <div class="section-divider"></div>

      <div class="fixed-email-section">
        <div class="section-subtitle">📌 固定邮箱</div>
        <p class="hint">支持批量添加，每行一个邮箱地址</p>
        <p class="example">示例：test123@gmail.com</p>
        <textarea id="fixedEmailInput" rows="4" placeholder="test123@gmail.com&#10;test456@outlook.com&#10;test789@qq.com"></textarea>
        <button class="btn btn-secondary" id="addFixedEmails">+ 批量添加固定邮箱</button>
      </div>

      <div id="emailList" class="item-list"></div>
      <div class="email-count">已生成邮箱：<span id="emailCountDisplay">0</span></div>
    </div>

    <!-- 密码Tab -->
    <div class="tab-content" id="password-tab">
      <div class="section-title">🔐 密码管理</div>
      <p class="hint">自动生成的密码会保存在这里</p>
      
      <div class="form-group">
        <label>默认密码长度：</label>
        <input type="number" id="passwordLength" value="16" min="8" max="32">
      </div>

      <button class="btn btn-primary" id="generatePassword">🎲 生成新密码</button>
      
      <div id="passwordList" class="item-list"></div>
    </div>

    <!-- 邮箱验证码Tab -->
    <div class="tab-content" id="verify-tab">
      <div class="section-title">✉️ 邮箱验证码</div>
      <p class="hint">验证码需要手动输入，插件会自动检测并提交</p>
      
      <div class="verify-status">
        <p>等待验证码输入...</p>
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>
